<template>
  <view class="center-bg">
    <!-- 用户信息卡片 -->
    <view class="profile-card">
      <view class="profile-row">
        <image :src="avatar" class="avatar" @click="goToEditInfo"/>
        <view class="profile-info">
          <view class="name" @click="goToEditInfo">{{ name }}</view>
          <view class="id-row">
            <text class="id">ID: {{ userId }}</text>
            <text class="auth" v-if="authStatus">已认证</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 三大入口卡片 -->
    <view class="entry-card">
      <view class="quick-row-vertical">
        <!-- 我的房屋 -->
        <view class="quick-item-vertical" @click="goToHouses">
          <!-- <view class="balance-value-inline">0</view> -->
          <view class="icon-label-row">
            <uni-icons type="home" size="22" color="#3c96f3" style="padding-right: 3px;" />
            <text>我的房屋</text>
          </view>
        </view>
        <!-- 我的余额 -->
        <view class="quick-item-vertical balance-item" @click="goToBalance">
          <!-- <text class="balance-value-inline">{{ balance }}</text> -->
          <view class="icon-label-row">
            <uni-icons type="wallet" size="22" color="#3c96f3" style="padding-right: 3px;" />
            <text>我的余额</text>
          </view>
        </view>
        <!-- 缴费记录 -->
        <view class="quick-item-vertical" @click="goToPaymentRecords">
          <!-- <view class="balance-value-inline">0</view> -->
          <view class="icon-label-row">
            <uni-icons type="list" size="22" color="#3c96f3" style="padding-right: 3px;" />
            <text>缴费记录</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 常用功能九宫格 -->
    <view class="func-card">
      <view class="func-title">
        <view class="func-bar"></view>
        <text>常用功能</text>
      </view>
      <view class="func-grid">
        <view class="func-item" v-for="item in funcList" :key="item.text" @click="item.action">
          <uni-icons :type="item.icon" size="36" :color="item.color" />
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  computed: {
    avatar() {
      return this.$store.state.user.avatar || '默认头像地址'
    },
    name() {
      return this.$store.state.user.name || '未登录'
    }
  },
  data() {
    return {
      userId: '10001',
      authStatus: true,
      balance: '0',
      funcList: [
        { icon: 'calendar', text: '充电桩报装', color: '#3c96f3', action: () => this.goToCharge() },
        { icon: 'phone', text: '客服电话', color: '#07c160', action: () => this.callService() },
        { icon: 'gear', text: '故障报修', color: '#f56c6c', action: () => this.goToRepair() },
        { icon: 'settings', text: '常用设置', color: '#888', action: () => this.goToSetting() },
        { icon: 'help', text: '常见问题', color: '#888', action: () => this.goToFAQ() },
        { icon: 'person', text: '修改用户信息', color: '#3c96f3', action: () => this.goToEditInfo() },
        { icon: 'wallet', text: '绑定银行卡', color: '#07c160', action: () => this.goToBindCard() },
        { icon: 'close', text: '退出登录', color: '#f56c6c', action: () => this.logout() }
      ]
    }
  },
  methods: {
    goToEditInfo() {
      this.$tab.navigateTo('/pages/mine/info/edit')
    },
    goToHouses() { this.$tab.navigateTo('/pages/mine/account/index') },
    goToBalance() { this.$tab.navigateTo('/pages/mine/balance/index') },
    goToPaymentRecords() { this.$tab.navigateTo('/pages/homeWorkbench/index') },
    goToCharge() { 
      // 拨打充电桩报装电话
      uni.showModal({
        title: '充电桩报装',
        content: '确定要拨打充电桩报装电话 13751138618 吗？',
        success: (res) => {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: '13751138618',
              fail: (err) => {
                uni.showToast({
                  title: '拨打电话失败',
                  icon: 'none'
                });
              }
            });
          }
        }
      });
    },
    callService() { 
      // 拨打客服电话
      uni.showModal({
        title: '客服电话',
        content: '确定要拨打客服电话 4006983338 吗？',
        success: (res) => {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: '4006983338',
              fail: (err) => {
                uni.showToast({
                  title: '拨打电话失败',
                  icon: 'none'
                });
              }
            });
          }
        }
      });
    },
    goToRepair() { 
      // 跳转到故障报修页面
      this.$tab.navigateTo('/pages/mine/repair/index');
    },
    goToSetting() { /* 跳转设置 */ },
    goToFAQ() { /* 跳转常见问题 */ },
    goToBindCard() {
      this.$tab.navigateTo('/pages/mine/bindCard/index')
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 保存微信openid和记住的账号密码
            const wechatOpenid = uni.getStorageSync('wechat_openid')
            const savedCredentials = uni.getStorageSync('savedCredentials')
            
            // 清除所有存储数据
            uni.clearStorage()
             
            // 如果之前有微信openid，则重新保存
            if (wechatOpenid) {
              uni.setStorageSync('wechat_openid', wechatOpenid)
            }
            
            // 如果之前有记住的账号密码，则重新保存
            if (savedCredentials) {
              uni.setStorageSync('savedCredentials', savedCredentials)
              console.log('已保留记住的账号密码')
            }
            
            // 跳转到登录页面
            uni.reLaunch({ url: '/' })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.center-bg {
  min-height: 100vh;
  background: #f5f6f7;
}

.profile-card {
  margin: 0 24rpx;
  margin-top: 4rpx;
  background: linear-gradient(135deg, #eaf3ff 0%, #f5f6f7 100%);
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(60, 150, 243, 0.08);
  padding: 32rpx 24rpx 24rpx 24rpx;
}

.profile-row {
  display: flex;
  align-items: center;
}

.avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background: #fff;
  margin-right: 24rpx;
  border: 2rpx solid #e0e0e0;
}

.profile-info {
  flex: 1;
}

.name {
  font-size: 34rpx;
  font-weight: bold;
  color: #222;
}

.id-row {
  display: flex;
  align-items: center;
  margin-top: 4rpx;
}

.id {
  font-size: 24rpx;
  color: #888;
}

.auth {
  font-size: 22rpx;
  color: #07c160;
  margin-left: 12rpx;
}

.profile-tip {
  margin: 18rpx 0 0 0;
  font-size: 22rpx;
  color: #888;
  display: flex;
  align-items: center;
}

.go-complete {
  color: #07c160;
  margin-left: 12rpx;
}

.entry-card {
  margin: 36rpx 24rpx 10rpx 24rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(60, 150, 243, 0.06);
  padding: 18rpx 0 8rpx 0;
}

.quick-row-vertical {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  margin-top: 8rpx;
}

.quick-item-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 120rpx;
}

.badge-vertical {
  width: 44rpx;
  height: 44rpx;
  background: #f56c6c;
  color: #fff;
  font-size: 28rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
  font-weight: bold;
}

.balance-value-inline {
  color: #3c96f3;
  font-size: 42rpx;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 8rpx;
}

.icon-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-label-row uni-icons {
  margin-right: 6rpx;
}

.icon-label-row text {
  font-size: 26rpx;
  color: #3c96f3;
}

.func-card {
  margin: 32rpx 24rpx 0 24rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(60, 150, 243, 0.06);
  padding: 18rpx 0 8rpx 0;
}

.func-title {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #222;
  font-weight: bold;
  margin-left: 18rpx;
  margin-bottom: 12rpx;
}

.func-bar {
  width: 6rpx;
  height: 28rpx;
  background: #3c96f3;
  border-radius: 3rpx;
  margin-right: 12rpx;
}

.func-grid {
  display: flex;
  flex-wrap: wrap;
}

.func-item {
  width: 33.33%;
  padding: 24rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 24rpx;
  color: #222;
}

.func-item text {
  margin-top: 8rpx;
}
</style>
